<template>
  <div>
    <projectheader />
    <div class="udlite-container partners">
      <!-- 上传表单 -->
      <van-cell-group>
        <van-uploader :after-read="afterRead" />
      </van-cell-group>

      <van-cell-group v-for="(u, index) in u_list" :key="index">
        <van-image
          width="10rem"
          height="10rem"
          :src="'http://127.0.0.1:8000/static/upload/' + u.picture"
        >
          <template v-slot:error>加载失败</template>
        </van-image>
      </van-cell-group>
      <van-button type="danger" @click="to_default">恢复默认设置</van-button>
    </div>
    <projectfooter />
  </div>
</template>

<script>
import Projectfooter from "../header_folder/projectfooter.vue";
import projectheader from "../header_folder/projectheader.vue";
export default {
  components: { projectheader, Projectfooter },
  data() {
    return {
      token: localStorage.getItem("token"),
      u_list: [],
    };
  },
  methods: {
    // 文件上传
    afterRead(file) {
      // 定义参数
      let fdata = new FormData();
      fdata.append("file", file.file);
      fdata.append("token", this.token);
      // 创建实例
      const axiosInstance = this.axios.create({ withCredentialss: false });
      axiosInstance({
        method: "put",
        url: "http://127.0.0.1:8000/up_pic/",
        data: fdata,
      })
        .then((res) => {
          console.log(res);
          console.log(res.data.pic);
          this.$toast(res.data.msg);
          location.reload();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    to_default() {
      this.axios
        .put("http://127.0.0.1:8000/del_pic/", {token:this.token})
        .then((res) => {
          this.$toast(res.data.msg);
          this.$router.go(0);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.axios
      .get("http://127.0.0.1:8000/user/", { params: { token: this.token } })
      .then((res) => {
        console.log(res);
        this.u_list = res.data.data;
      });
  },
};
</script>

<style>
</style>